<template>
  <avue-input-tree
    v-loading="treeLoading"
    ref="deptTreeRef"
    :dic="treeDeptData"
    node-key="deptCode"
    size="small"
    :nodeClick="nodeClick"
    :props="{ label: 'name', value: 'deptCode',disabled:'disabled',children: 'children' }"
    placeholder="请选择"
    @change="onChange"
  />
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {fetchTree} from "@/api/admin/dept";

const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000)
}
export default {
  name: "orgUseTree",
  created() {
  },
  props:{
    cValue:""
  },
  watch: {},
  data() {
    return {
      treeLoading: false,
      value: "",
      treeDeptData: [],
      options: [{
        id: 'success',
        label: 'With children',
        // Declare an unloaded branch node.
        children: null,
      }, {
        id: 'no-children',
        label: 'With no children',
        children: null,
      }, {
        id: 'failure',
        label: 'Demonstrates error handling',
        children: null,
      }],
    }
  },
  methods: {
    init(sourceDeptCode) {
      // console.log('init orgUseTree', sourceDeptCode)
      this.treeLoading = true
      fetchTree({pid: sourceDeptCode}).then((res) => {
        if (res.data) {
          this.treeDeptData = res.data.data;
        }
        if(this.cValue){
          this.$refs.deptTreeRef.text = this.cValue
        }
        this.treeLoading = false
      }).catch(_ => {
        this.treeLoading = false
      });
    },
    onChange(event) {//当点击clear按钮时，通过此事件捕捉，清空之前的选择
      if (!event) {
        this.$refs.deptTreeRef.text = ""
        this.$refs.deptTreeRef.labelText = []
        //收起所有节点
        this.$refs.deptTreeRef.$refs.tree.$children.forEach(item => item.expanded = false)
        this.$emit('returnDeptCode', "");
      }
      //debugger
      //console.log(event)
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      // if (node.children && !node.children.length) {
      //   delete node.children
      // }
      return {
        id: node.OBJID,
        label: node.STEXT,
        children: []
      }
    },
    treeLoad(node, resolve) {
      // console.log(node)
    },
    nodeClick(t, e, n) {
      this.$emit('returnDeptCode', t.deptCode);
    }
  }
}
</script>
<style scoped>
.vue-treeselect__menu {
  cursor: default;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  width: auto;
  height: 600px;
  border: 1px solid #cfcfcf;
  background: #fff;
  line-height: 180%;
  -webkit-overflow-scrolling: touch;
}
</style>
